<template>
	<view class="container">
		<view class="title">请输入验证码</view>
		<view class="desc">短信验证码我们已经发送到{{ phone }}请注意查看并在下面输入</view>
		<view style="width: 500rpx;margin: 80rpx auto 40rpx;font-weight: bold;font-size: 30rpx;">
			<verification-code-style2 ref="verificationCodeStyle2" @inputVerificationChange="inputVerificationChange"
				borderStyle="border:1px solid #E5E5E5"
				borderCheckStyle="border:1px solid #2F80ED"></verification-code-style2>
		</view>
		<view class="tips">接收短信大约需要{{ countdown }}s</view>
		<view class="btn" @click="resendCode"
			:style="{opacity: canResend ? 1 : 0.6, pointerEvents: canResend ? 'auto' : 'none'}">
			重新获取短信验证码
		</view>
	</view>
</template>

<script>
	import {
		sendSmsCode
	} from "@/api/ModifyPhone.js";
	export default {
		data() {
			return {
				phone: '',
				countdown: 60, // 倒计时秒数
				timer: null, // 定时器
				canResend: false // 是否可以重新发送
			};
		},
		onLoad: function(option) {
			this.phone = option.phone;
			// 页面加载时自动发送验证码
			this.sendVerificationCode();
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			// 发送验证码
			sendVerificationCode() {
				// 显示加载中
				uni.showLoading({
					title: '发送中...'
				});

				// 调用发送验证码接口
				sendSmsCode(this.phone).then(res => {
					uni.hideLoading();

					if (res.code === 200) {
						uni.showToast({
							title: '验证码发送成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.msg || '验证码发送失败',
							icon: 'none'
						});
					}
					// 无论成功失败都开始倒计时
					this.startCountdown();
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.message || '网络错误，请稍后重试',
						icon: 'none'
					});
					// 接口出错也启动倒计时
					this.startCountdown();
				});
			},

			// 开始倒计时
			startCountdown() {
				// 重置倒计时状态
				this.countdown = 60;
				this.canResend = false;

				// 清除已有定时器
				if (this.timer) {
					clearInterval(this.timer);
				}

				// 设置定时器
				this.timer = setInterval(() => {
					this.countdown--;

					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.timer = null;
						this.canResend = true;
						this.countdown = 0;
					}
				}, 1000);
			},

			// 重新发送验证码
			resendCode() {
				if (this.canResend) {
					// 重新发送时先重置状态
					this.canResend = false;
					this.countdown = 60;
					if (this.timer) {
						clearInterval(this.timer);
						this.timer = null;
					}
					this.sendVerificationCode();
				}
			},

			// 验证码输入变化
			inputVerificationChange(val) {
				console.log('验证码输入：' + val);
				if (val.length === 6) {
					// 验证码输入完成，可以进行验证操作
					// this.verifyCode(val);
				}
			},

			// 验证验证码（示例方法）
			verifyCode(code) {
				console.log('验证验证码：', code);
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 样式保持不变 */
	.container {
		min-height: calc(100vh - 120rpx);
		padding: 60rpx;
		background: radial-gradient(52% 101% at 16% 6%, #E2EFFF 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);

		.title {
			font-weight: 600;
			font-size: 50rpx;
			color: #333333;
			margin-bottom: 80rpx;
		}

		.desc {
			font-size: 28rpx;
			color: #888;
			margin-bottom: 80rpx;
		}

		.tips {
			font-size: 28rpx;
			color: #999;
			text-align: center;
			margin-bottom: 80rpx;
		}

		.btn {
			font-size: 28rpx;
			color: #2F80ED;
			text-align: center;
			transition: opacity 0.3s;
		}
	}
</style>